---
import '@sumup-oss/design-tokens/fonts.css';
import '@sumup-oss/design-tokens/light.css';
import '@sumup-oss/circuit-ui/styles.css';

import { SumUpLogo } from '@sumup-oss/icons';

interface Props {
  title: string;
}

const { title } = Astro.props;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,viewport-fit=cover"
    />

    {/* Font performance optimization */}
    <link
      rel="preload"
      href="https://static.sumup.com/fonts/Inter/Inter-normal-latin.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />

    {/* Browser icons */}
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="https://static.sumup.com/favicons/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="https://static.sumup.com/favicons/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="https://static.sumup.com/favicons/favicon-16x16.png"
    />
    <link
      rel="manifest"
      href="https://static.sumup.com/favicons/site.webmanifest"
    />
    <link
      rel="mask-icon"
      href="https://static.sumup.com/favicons/safari-pinned-tab.svg"
      color="#ffffff"
    />
    <link
      rel="shortcut icon"
      href="https://static.sumup.com/favicons/favicon.ico"
    />
    <meta
      name="msapplication-config"
      content="https://static.sumup.com/favicons/browserconfig.xml"
    />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <meta name="theme-color" content="#ffffff" />

    <title>{title}</title>
  </head>
  <body>
    <div class="base">
      <main class="main">
        <slot />
      </main>
      <footer class="footer">
        <a
          href="https://sumup.com"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Open SumUp's homepage in a new tab"
        >
          <SumUpLogo className="logo" />
        </a>
      </footer>
    </div>
  </body>
</html>

<style>
  .base {
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
      env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  .main {
    max-width: 1000px;
    margin: var(--cui-spacings-tera);
  }

  .footer {
    display: flex;
    grid-row-start: 2;
    grid-row-end: 3;
    justify-content: center;
    margin: var(--cui-spacings-tera);
  }

  .logo {
    display: block;
    width: 120px;
    color: var(--cui-fg-normal);
  }
</style>
